import React, { Component } from 'react';
import { Table, Space, Button, Form, Input, DatePicker, Pagination, Divider,message } from 'antd';
import { UnorderedListOutlined,DeleteOutlined, } from '@ant-design/icons'
import styles from './index.less'
import {connect} from 'dva'
const { RangePicker } = DatePicker
@connect(({global})=>({
  userId: global.userId,
}))
class TOShareForm extends Component {
  constructor (props) {
    super(props);
    this.state = {
      currentPage: 0,
      pageSize: 5,
      shareType: 1,//1 我分享给别人 2：别人分享给我
      shareName: "",
      startTime: "",
      endTime: "",
      data:[],
      rangeTimeValue: "",
    }
  }
  componentDidMount=()=>{
    // console.log("ddd")
    this.props.getShareListFromMe()
  }
  componentWillReceiveProps = (nextProps) => {
    console.log(nextProps)
    this.setState({ data: nextProps.dataOfFromMe })
  }
  //详情
  handleShareDetail = (record) => {

  }

  //删除分享
  handleDelete = (record) => {
    // alert("收藏数据  " + record.name + "   已移除")
    const { dispatch,  } = this.props
    dispatch({
      type:"global/deleteShare",
      payload:{
        shareType:1,
        id:record.id,
        userId:this.props.userId?this.props.userId:""
      }
    }).then((res)=>{
      message.success("删除成功")
      this.getShareListFromMe()
    })
  }
  //选择分享时间
  handleRangeOnChange = (value, dateString) => {
    console.log(dateString)
    this.setState({
      startTime: dateString[0],
      endTime: dateString[1],
      currentPage:0
    })
  }

  //分页
  pageChange = (page, pageSize) => {
    console.log(page)
    this.setState({pageSize:pageSize,currentPage:page},()=>{this.getShareListFromMe()})
  }
  //
  pageSizeChange = (current, size) => {
    console.log(current)
    this.setState({pageSize:size,currentPage:1},()=>{this.getShareListFromMe()})
  }
  searchShareListFromMe=()=>{
    this.setState({
      currentPage:1
    },()=>{
      this.getShareListFromMe()
    })
  }
  //列表
  getShareListFromMe = () => {
    const { dispatch,} = this.props
    let {currentPage,pageSize,shareType,shareName,startTime,endTime} = this.state
    dispatch({
      type:"global/getShareList",
      payload:{
        userId:this.props.userId?this.props.userId:"",
        shareType:shareType,
        text:shareName,
        startTime:startTime,
        endTime:endTime,
        pageSize:pageSize,
        pageNum:currentPage===0?1:currentPage
      }
    }).then((res)=>{
      console.log(res)
      if(res){
        res.data.rows.forEach((item, index) => {
            item.key = index
          })
        this.setState({data:res.data.rows})
       }
    })
  }
  clearEvent=()=>{
    this.setState({
      shareName: "",
      startTime: "",
      endTime: "",
      rangeTimeValue:new Date()
    },()=>{this.getShareListFromMe()}) 
  }
  render() {
    let { currentPage,shareName,data,rangeTimeValue } = this.state;
   
    //表头数据
    const columns = [
      {
        title: '编号',
        dataIndex: 'num',
        key: 'num',
        align: "center",
        render: (text, record, index) => `${index + 1 + currentPage * 10}`,
      },
      {
        title: '被分享者',
        dataIndex: 'receiverName',
        align: "center",
        key: 'receiverName',
      },
      {
        title: '资源名称',
        dataIndex: 'title',
        align: "center",
        key: 'title',
      },
      {
        title: '资源发布者',
        dataIndex: 'publisherName',
        align: "center",
        key: 'publisherName',
      },
      {
        title: '资源发布账号',
        key: 'updName',
        align: "center",
        dataIndex: 'updName',
      },
      {
        title: '资源发布时间',
        key: 'onlineTime',
        align: "center",
        dataIndex: 'onlineTime',
      },
      {
        title: '资源分享时间',
        key: 'shareStartTime',
        align: "center",
        dataIndex: 'shareStartTime',
      },
      {
        title: '操作',
        key: 'action',
        align: "center",
        render: (text, record, index) => (
          <Space size="middle">
            {/* <Button type="primary"
              icon={ <UnorderedListOutlined /> }
              size="small" shape="round"
              style={ { background: "#11bf94" } }
              onClick={ () => this.handleShareDetail(record) }>详情</Button> */}
            <Button type="primary"
              icon={ <DeleteOutlined /> }
              danger
              size="small"
              shape="round"
              onClick={ () => this.handleDelete(record) }>删除</Button>
          </Space>
        ),
      },
    ];

    return (
      <div>
        <div style={ { background: "white" } }>
          <div className={ styles.form }>
            <Form
              layout="inline"
            >
              <Form.Item
                label="关键字"
              // name="username"
              // rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <Input
                  placeholder="请输入关键字"
                  value={ shareName }
                  onChange={ (e) => { this.setState({ shareName: e.target.value,currentPage:0 }) } } />
              </Form.Item>
              <Form.Item
                label="分享时间"
              >
                <RangePicker
                  key={ rangeTimeValue }
                  showTime
                  format="YYYY/MM/DD HH:mm:ss"
                  onChange={ this.handleRangeOnChange }
                />
              </Form.Item>
             
              <Form.Item>
                <Button type="primary" onClick={this.searchShareListFromMe}>查询</Button>
                <Button type="default" style={ { marginLeft: "10px" } } onClick={this.clearEvent}>清空</Button>
              </Form.Item>
            </Form>
          </div>
          <Divider />
          <Table
            columns={ columns }
            dataSource={ data }
            pagination={ false }
          />
        </div>
        <div className={ styles.pagination }>
          <Pagination
            total={ data.length }
            showSizeChanger
            showQuickJumper
            current={currentPage === 0 ? 1 : currentPage}
            defaultCurrent={1}
            defaultPageSize={5}
            pageSizeOptions={[5,10,20,50]}
            showTotal={ total => `共 ${total} 条` }
            onChange={ this.pageChange }
            onShowSizeChange={ this.pageSizeChange }
          />
        </div>
      </div>
    );
  }
}

export default TOShareForm;